<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/new.css">
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">找回密码</h1>
		</header>
		<div class="mui-content" id="page">
			<div class="p-mw resetpass">
				<img class="p-mw" src="../img/login.png">
				<div class="p-posr resetpassBox">
					<form class="mui-input-group">
						<div class="mui-input-row">
							<label>手机号</label>
							<input type="text" v-model="form.phone" placeholder="请输入手机号">
						</div>
						<div class="mui-input-row">
							<label>验证码</label>
						    <input type="text" v-model="form.code" placeholder="请输入验证码">
							<button type="button" @click="sendCode" class="p-posa mui-btn">{{btnTxt}}</button>
						</div>
						<div class="mui-input-row">
							<label>设置密码</label>
							<input type="password" v-model="form.password" v-on:input="checkPwd" placeholder="请输入密码">
						</div>
						<div class="p-mw mima">
							<div class="qiangdu"><span class="on">弱</span><span class="on">中</span>
							<span class="on">强</span></div>
						</div>
						<div class="mui-input-row">
							<label>确认密码</label>
							<input type="password" v-model="form.confirmPassword" placeholder="请再次输入密码">
						</div>
						<div class="p-mw p-posa p-btn" @click="submit">确认</div>
					</form>
				</div>
			</div>
		</div>

	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/jquery-3.2.1.min.js"></script>
	<script src="../js/mkeyplus.base.js"></script>
	<script src="../../../js/common.js"></script>
	<script type="text/javascript" src="../../../js/vue.js"></script>
	<script src="js/md5.js"></script>
	<script src="./js/api.js"></script>
	<script>
		mui.init();
		var htapi = new HTGlobal();
		var page = new Vue({
			el: '#page',
			data:{
				form:{
					
				},
				btnTxt:'发送验证码'
			},
			methods:{
				checkPwd(){
					//验证密码强度
					var str = this.form.password,num=htapi.checkPwd(str),doms=$('.qiangdu span');
					doms.removeClass('on').parent().css('visibility','initial')
					if(num>0){
						for(var i=0;i<num;i++){doms.eq(i).addClass('on')}
					}else{
						doms.parent().css('visibility','hidden')
					}
				},
				submit(){console.log(this.form.password);
					var form = this.form;
					if (!(/^1[3456789]\d{9}$/.test(form.phone))) {
						mui.toast('请输入正确的手机号码');
						return false;
					}
					/* 验证码预留区 p-code */
					/* end p-code */
					if (form.password.length <= 11) {
					    mui.toast('请设置11位以上密码');
					    return false;
					}
					// if(!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,18}$/.test(form.password))){
					if(!/(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{12,}/.test(form.password)){
					    mui.toast('密码必须包含大写字母，小写字母、数字及特殊字符');
					    return false;
					}
					if (form.password != form.confirmPassword) {
					    mui.toast('新密码与确认密码不一致');
					    return false;
					}
					var post_data = JSON.parse(JSON.stringify(form));
					//md5
					post_data.confirmPassword = post_data.password = md5(post_data.password);
					htapi.retrievePassword(post_data,function(res){

						mui.toast(res.msg);
						if(res.code=='0'){
							//修改成功 跳转
							mui.openWindow({
							  url: './login_ext.html',
							  id: './login_ext.html'
							});
							form.password = form.phone = form.confirmPassword = form.code = ''
						}
						console.log(JSON.stringify(res));
						console.log(JSON.stringify(localStorage))
					})
				},
				sendCode(){
					//发送验证码
					htapi.sendCode(this.$data);
				}
			}
		})
	</script>	
</html>
